<template>
    <div>
        <div v-clickoutside="hideReplyBtn" @click="inputFocus" class="my-reply">
            <el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar>
            <div class="reply-info">
                <div
                        tabindex="0"
                        contenteditable="true"
                        id="replyInput"
                        spellcheck="false"
                        placeholder="输入评论..."
                        class="reply-input"
                        @focus="showReplyBtn"
                        @input="onDivInput($event)"
                ></div>
            </div>
            <div class="reply-btn-box" v-show="btnShow">
                <el-button
                        class="reply-btn"
                        size="medium"
                        @click="sendcontent"
                        type="primary"
                >发表评论</el-button
                >
            </div>
        </div>
        <div
                v-for="(item, i) in contents"
                :key="i"
                class="author-title reply-father"
        >
            <el-avatar class="header-img" :size="40" :src="item.ico"></el-avatar>
            <div class="author-info">
                <span class="author-name">{{ item.name }}</span>
                <span class="author-time">{{ item.time }}</span>
            </div>
            <div class="icon-btn">
        <span @click="showReplyInput(i, item.name, item.id)"
        ><i class="iconfont el-icon-s-content"></i>{{ item.contentNum }}</span
        >
                <span @click="addPointer(item)">
          <Icon
                  :class="
              item.iconfontPointer == 1 ? 'iconfontPointer' : 'iconfontHide'
            "
                  type="md-thumbs-up"
          />{{ item.like }}
        </span>
            </div>
            <div class="talk-box">
                <p>
                    <span class="reply">{{ item.content }}</span>
                </p>
            </div>
            <div class="reply-box">
                <div v-for="(reply, j) in item.reply" :key="j" class="author-title">
                    <el-avatar
                            class="header-img"
                            :size="40"
                            :src="reply.fromico"
                    ></el-avatar>
                    <div class="author-info">
                        <span class="author-name">{{ reply.from }}</span>
                        <span class="author-time">{{ reply.time }}</span>
                    </div>
                    <div class="icon-btn">
            <span @click="showReplyInput(i, reply.from, reply.id)"
            ><i class="iconfont el-icon-s-content"></i
            >{{ reply.contentNum }}</span
            >
                        <span @click="addPointerH(reply)">
              <Icon
                      :class="
                  reply.iconfontPointer == 1
                    ? 'iconfontPointer'
                    : 'iconfontHide'
                "
                      type="md-thumbs-up"
              />{{ reply.like }}
            </span>
                    </div>
                    <div class="talk-box">
                        <p>
                            <span>回复 {{ reply.to }}:</span>
                            <span class="reply">{{ reply.content }}</span>
                        </p>
                    </div>
                    <div class="reply-box"></div>
                </div>
            </div>
            <div v-show="_inputShow(i)" class="my-reply my-content-reply">
                <el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar>
                <div class="reply-info">
                    <div
                            tabindex="0"
                            contenteditable="true"
                            spellcheck="false"
                            placeholder="输入评论..."
                            @input="onDivInput($event)"
                            class="reply-input reply-content-input"
                    ></div>
                </div>
                <div class="reply-btn-box">
                    <el-button
                            class="reply-btn"
                            size="medium"
                            @click="sendcontentReply(i, j)"
                            type="primary"
                    >发表评论</el-button
                    >
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    const clickoutside = {
        // 初始化指令
        bind(el, binding, vnode) {
            function documentHandler(e) {
                // 这里判断点击的元素是否是本身，是本身，则返回
                if (el.contains(e.target)) {
                    return false;
                }
                // 判断指令中是否绑定了函数
                if (binding.expression) {
                    // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
                    binding.value(e);
                }
            }
            // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
            el.vueClickOutside = documentHandler;
            document.addEventListener("click", documentHandler);
        },
        update() {},
        unbind(el, binding) {
            // 解除事件监听
            document.removeEventListener("click", el.vueClickOutside);
            delete el.vueClickOutside;
        },
    };
    export default {
        name: "Test",
        props:['postsid','userid'],
        created() {

            this.myName = localStorage.getItem('userName');
            this.myHeader = localStorage.getItem('ico');
            // 获取评论列表
            console.log(this.postsid);
            this.$axios
                .get("/api/comment/getCommentByPostsId",{
                    params:{
                        postsId:this.postsid
                    }
                })
                .then(req=>{
                    const tmp = req.data.data;
                    this.contents = tmp;
                    console.log(this.contents);
                })
        },
        data() {
            return {
                btnShow: false,
                index: "0",
                replycontent: "",
                myName: "Lana Del Rey",
                myHeader:
                    "https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg",
                myId: 19870621,
                to: "",
                toId: -1,
                contents: [
                    {
                        name: "昭昭若日月之名",
                        id: 19870621,
                        ico:
                            "https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg",
                        content: "我发了个新的评论",
                        time: "2019年9月16日 18:43",
                        contentNum: 2,
                        like: 15,
                        inputShow: false,
                        iconfontPointer: 0,
                        // reply: [
                        //     {
                        //         from: "Taylor Swift",
                        //         fromId: 19891221,
                        //         fromico:
                        //             "https://ae01.alicdn.com/kf/H94c78935ffa64e7e977544d19ecebf06L.jpg",
                        //         to: "Lana Del Rey",
                        //         toId: 19870621,
                        //         content: "hjdjdhjdtrsyyts！！",
                        //         time: "2019年9月16日 18:43",
                        //         contentNum: 1,
                        //         like: 15,
                        //         inputShow: false,
                        //         iconfontPointer: 0,
                        //     },
                        //     {
                        //         from: "Ariana Grande",
                        //         fromId: 1123,
                        //         fromico:
                        //             "https://ae01.alicdn.com/kf/Hf6c0b4a7428b4edf866a9fbab75568e6U.jpg",
                        //         to: "Lana Del Rey",
                        //         toId: 19870621,
                        //         content: "gregyartretwwt",
                        //         time: "2019年9月16日 18:43",
                        //         contentNum: 0,
                        //         like: 5,
                        //         inputShow: false,
                        //         iconfontPointer: 0,
                        //     },
                        // ],
                    },
                ],
            };
        },
        directives: { clickoutside },
        methods: {
            addPointerH(item) {
                let vm = this;
                if (item.iconfontPointer == 0) {
                    item.like += 1;
                    item.iconfontPointer = 1;
                } else if (item.like > 0) {
                    item.like -= 1;
                    item.iconfontPointer = 0;
                }
            },
            addPointer(item) {
                let vm = this;
                if (item.iconfontPointer == 0) {
                    item.like += 1;
                    item.iconfontPointer = 1;
                } else if (item.like > 0) {
                    item.like -= 1;
                    item.iconfontPointer = 0;
                }
            },
            inputFocus() {
                var replyInput = document.getElementById("replyInput");
                replyInput.style.padding = "8px 8px";
                replyInput.style.border = "2px solid blue";
                replyInput.focus();
            },
            showReplyBtn() {
                this.btnShow = true;
            },
            hideReplyBtn() {
                this.btnShow = false;
                replyInput.style.padding = "10px";
                replyInput.style.border = "none";
            },
            showReplyInput(i, name, id) {
                this.contents[this.index].inputShow = false;
                this.index = i;
                this.contents[i].inputShow = true;
                this.to = name;
                this.toId = id;
            },
            _inputShow(i) {
                return this.contents[i].inputShow;
            },
            sendcontent() {
                console.log("11111");
                if (!this.replycontent) {
                    this.$message({
                        showClose: true,
                        type: "warning",
                        message: "评论不能为空",
                    });
                } else {
                    this.$axios
                        .post("/api/comment/createComment",{
                            postsid:this.postsid,
                            content:this.replycontent
                        })
                        .then(req=>{
                            this.$message.success("发送评论完成");
                        })
                    let a = {};
                    let input = document.getElementById("replyInput");
                    let timeNow = new Date().getTime();
                    let time = this.dateStr(timeNow);
                    a.name = this.myName;
                    a.content = this.replycontent;
                    a.ico = this.myHeader;
                    a.time = time;
                    a.contentNum = 0;
                    a.like = 0;
                    this.contents.push(a);
                    this.replycontent = "";
                    input.innerHTML = "";
                }
            },
            sendcontentReply(i, j) {
                if (!this.replycontent) {
                    this.$message({
                        showClose: true,
                        type: "warning",
                        message: "评论不能为空",
                    });
                } else {
                    this.$axios
                    .post("/api/comment/createComment",{
                        postsId:this.postsId,
                        content:this.replycontent
                    })
                    .then(req=>{
                        this.$message.success("发送评论完成");
                    })
                    let a = {};
                    let timeNow = new Date().getTime();
                    let time = this.dateStr(timeNow);
                    a.from = this.myName;
                    a.to = this.to;
                    a.fromico = this.myHeader;
                    a.content = this.replycontent;
                    a.time = time;
                    a.contentNum = 0;
                    a.like = 0;
                    this.contents[i].reply.push(a);
                    this.replycontent = "";
                    document.getElementsByClassName("reply-content-input")[i].innerHTML =
                        "";
                }
            },
            onDivInput: function (e) {
                this.replycontent = e.target.innerHTML;
            },
            dateStr(date) {
                //获取js 时间戳
                var time = new Date().getTime();
                //去掉 js 时间戳后三位，与php 时间戳保持一致
                time = parseInt((time - date) / 1000);
                //存储转换值
                var s;
                if (time < 60 * 10) {
                    //十分钟内
                    return "刚刚";
                } else if (time < 60 * 60 && time >= 60 * 10) {
                    //超过十分钟少于1小时
                    s = Math.floor(time / 60);
                    return s + "分钟前";
                } else if (time < 60 * 60 * 24 && time >= 60 * 60) {
                    //超过1小时少于24小时
                    s = Math.floor(time / 60 / 60);
                    return s + "小时前";
                } else if (time < 60 * 60 * 24 * 30 && time >= 60 * 60 * 24) {
                    //超过1天少于30天内
                    s = Math.floor(time / 60 / 60 / 24);
                    return s + "天前";
                } else {
                    //超过30天ddd
                    var date = new Date(parseInt(date));
                    return (
                        date.getFullYear() +
                        "/" +
                        (date.getMonth() + 1) +
                        "/" +
                        date.getDate()
                    );
                }
            },
        },
    };
</script>

<style scoped>
    .iconfontPointer {
        cursor: pointer;
        color: rgb(236, 215, 25);
        margin: 0px 0.2rem 0.3rem 0.8rem;
    }
    .iconfontHide {
        cursor: pointer;
        color: rgb(158, 156, 156);
        margin: 0px 0.2rem 0.3rem 0.8rem;
    }
    .my-reply {
        padding: 10px;
        background-color: #fafbfc;
    }
    .my-reply .header-img {
        display: inline-block;
        vertical-align: top;
    }
    .my-reply .reply-info {
        display: inline-block;
        margin-left: 5px;
        width: 90%;
    }
    @media screen and (max-width: 1200px) {
        .my-reply .reply-info {
            width: 80%;
        }
    }
    .my-reply .reply-info .reply-input {
        min-height: 20px;
        line-height: 22px;
        padding: 10px 10px;
        color: #ccc;
        background-color: #fff;
        border-radius: 5px;
    }
    .my-reply .reply-info .reply-input:empty:before {
        content: attr(placeholder);
    }
    .my-reply .reply-info .reply-input:focus:before {
        content: none;
    }
    .my-reply .reply-info .reply-input:focus {
        padding: 8px 8px;
        border: 2px solid #00f;
        box-shadow: none;
        outline: none;
    }
    .my-reply .reply-btn-box {
        height: 25px;
        margin: 10px 0;
    }
    .my-reply .reply-btn-box .reply-btn {
        position: relative;
        float: right;
        margin-right: 15px;
    }
    .my-content-reply {
        margin-left: 50px;
    }
    .my-content-reply .reply-input {
        width: flex;
    }
    .author-title:not(:last-child) {
        border-bottom: 1px solid rgba(178, 186, 194, 0.3);
    }
    .author-title {
        padding: 10px;
    }
    .author-title .header-img {
        display: inline-block;
        vertical-align: top;
    }
    .author-title .author-info {
        display: inline-block;
        margin-left: 5px;
        width: 60%;
        height: 40px;
        line-height: 20px;
    }
    .author-title .author-info > span {
        display: block;
        cursor: pointer;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .author-title .author-info .author-name {
        color: #000;
        font-size: 18px;
        font-weight: bold;
    }
    .author-title .author-info .author-time {
        font-size: 14px;
    }
    .author-title .icon-btn {
        width: 30%;
        padding: 0 !important;
        float: right;
    }
    @media screen and (max-width: 1200px) {
        .author-title .icon-btn {
            width: 20%;
            padding: 7px;
        }
    }
    .author-title .icon-btn > span {
        cursor: pointer;
    }
    .author-title .icon-btn .iconfont {
        margin: 0 5px;
    }
    .author-title .talk-box {
        margin: 0 50px;
    }
    .author-title .talk-box > p {
        margin: 0;
    }
    .author-title .talk-box .reply {
        font-size: 16px;
        color: #000;
    }
    .author-title .reply-box {
        margin: 10px 0 0 50px;
        background-color: #efefef;
    }
</style>
